<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>代码生成</title>
    <style>

        /*.el-table th.jo-el-table-header {*/
        /*    background-color: #F5F7FA;*/
        /*}*/
    </style>
    <style>


    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box">
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-form :inline="true" :model="searchCondition">
                    <el-form-item label="表名">
                        <el-input v-model="searchCondition.tableName" placeholder="表名"></el-input>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-input v-model="searchCondition.author" placeholder="作者"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toSearch"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询
                        </el-button>
                        <!--                        <el-button type="text" >更多条件&nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></el-button>-->
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-button type="primary" @click="openAdd" plain>新建代码配置</el-button>
                <el-button type="danger" @click="batchDel" plain>删除</el-button>
                <el-button type="warning" onclick="window.location.reload()" plain>刷新</el-button>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <jo-el-table url="{URL_CMS}lowcode/generate/getPage"
                             :ref="joTableRef"
                             :search-param="searchCondition">
                    <template #default="scope">
                        <el-table :ref="tableRef" :data="scope.data" header-cell-class-name="jo-el-table-header">
                            <el-table-column prop="selection" label="#" type="selection" header-align="center" align="center"
                                             width="50"></el-table-column>
                            <el-table-column prop="id" label="ID" width="100"></el-table-column>
                            <el-table-column prop="name" label="说明"></el-table-column>
                            <el-table-column prop="tableName" label="表名"></el-table-column>
                            <el-table-column prop="className" label="类名"></el-table-column>
                            <el-table-column prop="savePath" label="保存路径"></el-table-column>
                            <el-table-column label="操作" width="300">
                                <template #default="scope">
                                    <el-button type="primary" link @click="openEdit(scope.row)">详情</el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="primary" link @click="generate(scope.row)">生成代码</el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="success" link @click="openOnline(scope.row)">在线查看</el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="danger" link @click="del(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </jo-el-table>
            </div>
        </el-col>
    </el-row>

    <el-dialog
            v-model="dialogVisible"
            title="请选择代码模板"
            width="420px"
    >
        <jo-el-data url="/lowcode/lcpTemplateGroup/getList">
            <template #default="scope">
                <el-select v-model="codeTemplate" placeholder="请选择代码模板" style="width: 100%;">
                    <el-option label="内置V4模板" value=""></el-option>
                    <el-option :label="item.name" :value="item.id"
                               v-for="item in scope.data"></el-option>
                </el-select>
            </template>
        </jo-el-data>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="generateConfirm">确认</el-button>
          </span>
        </template>
    </el-dialog>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<script src="/static/plugin/layer/layer.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<script type="text/javascript">

    const app = Vue.createApp(joEl.buildVueAppParam({
        data: function () {
            return {
                // 删除url
                deleteUrl: '/lowcode/generate/delete',
                // 查询参数
                searchCondition: {},
                dialogVisible: false,
                codeTemplate: '',
                generateId: '',
                // // 表格数据
                // tableData: [],
                // // 表格配置
                // tableConfig: {},
                // 分页参数
                pageParam: {
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizes: [10, 20, 50, 100],
                    total: 0,
                    layout: 'total, sizes, prev, pager, next',   //, jumper
                    hideOnSinglePage: false
                },
                // 视图配置
                viewConfig: {
                    // 新增表单地址
                    addFormUrl: '/page/lowcode/generateForm.html',
                    // 编辑表单地址
                    editFormUrl: '/page/lowcode/generateForm.html'
                    ,
                    // 获取新增表单url, 不建议重写此方法
                    getAddFormUrl() {
                        var url = this.addFormUrl;
                        // 表单url格式化
                        if (typeof this.handleFormUrl == 'function') {
                            url = this.handleFormUrl(url);
                        }
                        // 新增表单url格式化
                        if (typeof this.handleAddFormUrl == 'function') {
                            url = this.handleAddFormUrl(url);
                        }
                        return url;
                    },
                    // 获取编辑表单url, 不建议重写此方法
                    getEditFormUrl(item) {
                        var url = this.editFormUrl;
                        // 链接上拼接主键值
                        url += jo.getLinkSign(url) + this.PKName + '=' + encodeURIComponent(jo.getDefVal(item[this.PKName], ''));
                        // 表单url格式化
                        if (typeof this.handleFormUrl == 'function') {
                            url = this.handleFormUrl(url);
                        }
                        // 编辑表单url格式化
                        if (typeof this.handleUpdateFormUrl == 'function') {
                            url = this.handleUpdateFormUrl(url);
                        }
                        return url;
                    },
                    // 格式化表单url
                    handleFormUrl: function (url) {
                        return url;
                    }
                    ,
                    // 格式化新增表单url
                    handleAddFormUrl: function (url) {
                        return url;
                    }
                    ,
                    // 格式化更新表单url
                    handleUpdateFormUrl: function (url) {
                        return url;
                    }
                    , formWidth: '95%'
                    , formHeight: '95%'
                    , winTitleOfAdd: '添加'
                    , winTitleOfUpdate: '编辑'
                    , winNameOfAdd: 'WIN_ADD'
                    , winNameOfUpdate: 'WIN_EDIT'
                    , winFullOfAdd: false
                    , winFullOfUpdate: false
                    , PKName: 'id'

                    ,
                    // 打开新增表单
                    openAdd() {
                        jo.showWin(
                            {
                                content: this.getAddFormUrl(),
                                title: this.winTitleOfAdd,
                                name: this.winNameOfAdd,
                                area: [this.formWidth, this.formHeight],
                                btn: ['保存', '取消']
                                , btn1: function (idx) {
                                    var form = jo.getLayerIframe(idx);
                                    form.appVM.add();
                                }
                            },
                            // this.getAddFormUrl(),
                            // this.formWidth,
                            // this.formHeight,
                            // this.winTitleOfAdd,
                            // this.winNameOfAdd,
                            // this.winFullOfAdd,
                            // true
                        );
                    },
                    // 打开编辑表单, 参数1:被修改对象数据
                    openEdit(item) {
                        jo.showWin(
                            {
                                content: this.getEditFormUrl(item),
                                title: this.winTitleOfUpdate,
                                name: this.winNameOfUpdate,
                                area: [this.formWidth, this.formHeight],
                                btn: ['保存更新', '同步字段变更', '取消']
                                , btn1: function (idx) {
                                    var form = jo.getLayerIframe(idx);
                                    form.appVM.update();
                                }
                                , btn2: function (idx) {
                                    var form = jo.getLayerIframe(idx);
                                    form.appVM.syncFieldChange();
                                    return false;
                                }
                            },
                            // this.getEditFormUrl(item),
                            // this.formWidth,
                            // this.formHeight,
                            // this.winTitleOfUpdate,
                            // this.winNameOfUpdate,
                            // this.winFullOfAdd,
                            // true
                        );
                    }
                }
            }
        }
        , computed: {}
        , methods: {
            // 查询
            toSearch() {
                this.list_search();
            },
            // 新增
            openAdd() {
                this.viewConfig.openAdd();
            },
            // 编辑
            openEdit(item) {
                this.viewConfig.openEdit(item);
            },
            // 删除
            del(item) {
                this.delInvoke(item.id);
            },
            // 批量删除
            batchDel() {
                this.list_delete_batch();
                // var delId = jo.array2array(this.$refs.viewElTableRef.getSelectionRows(), function (item) {
                //     return item.id;
                // }).join(',');
                // this.delInvoke(delId);
            },
            // 删除执行
            delInvoke(delId) {
                var _this = this;
                if (!delId) {
                    jo.showTipsMsg('请选择待删除项!');
                    return;
                }
                jo.confirm('您确定要删除嘛?', function (idx) {
                    jo.postJsonAjax('/lowcode/generate/delete', {body:delId}).success(function (json) {
                        jo.showSuccessMsg('删除成功~');
                        // 刷新表格数据
                        _this.list_refresh();
                    }).error(function (json) {
                        parent.jo.showErrorMsg('删除失败~');
                    });
                    jo.close(idx);
                });
            },
            // 代码生成
            generate(item) {
                this.dialogVisible = true;
                this.generateId = item.id;
            },
            generateConfirm() {
                if (!this.generateId) {
                    return;
                }
                jo.postJsonAjax('/lowcode/generate/generateCode', {body:{generateId: this.generateId, codeTemplateId: this.codeTemplate}}).success(function (json) {
                    jo.showSuccessMsg('代码已生成~');
                }).error(function (json) {
                    jo.showErrorMsg('生成失败~');
                });
                this.dialogVisible = false;
            },
            openOnline(item) {
                jo.newWindow('/lowcode/online/html/view/' + item.id);
            }
        }
        , mounted() {

        }
        , setup() {

        }
    }, joEl.VUE_COMMON_VIEW, joEl.VUE_COMMON));
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
    joEl.component(app);

    var appVM = app.mount("#app");
</script>

</body>
</html>
